<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { getAllGoods } from '@/api/eleme/taobao.ts'
import {getToken} from "@/utils/auth.ts";
import { ElMessage } from 'element-plus';

// 分页相关状态
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)

// 表格数据
const tableData = ref([])

// 搜索参数
const searchGoodName = ref('')
const searchGoodClass = ref('')
const uploadUrl = ref(import.meta.env.VITE_APP_BASE_API + 'tb/import')
const headers = ref({
  Authorization: 'Bearer ' + getToken(),
})

// 封装数据获取方法
const fetchData = async () => {
  try {
    const res = await getAllGoods(
      currentPage.value,
      pageSize.value,
      searchGoodName.value,
      searchGoodClass.value
    )
    console.log('后端返回的完整数据:', res)
    tableData.value = res.rows || [] // 假设数据在 res.data 中，根据实际调整
    total.value = res.total || 0
  } catch (error) {
    console.error('获取数据失败:', error)
    total.value = 0
  }
}

// 处理每页显示数量变化
const handleSizeChange = (newSize: number) => {
  pageSize.value = newSize
  currentPage.value = 1
  fetchData()
}

// 处理当前页变化
const handleCurrentChange = (newPage: number) => {
  currentPage.value = newPage
  fetchData()
}

// 搜索方法
const handleSearch = () => {
  currentPage.value = 1
  fetchData()
}

// 重置方法
const handleReset = () => {
  searchGoodName.value = ''
  searchGoodClass.value = ''
  currentPage.value = 1
  fetchData()
}

// 上传成功回调
const handleUploadSuccess = (response, file, fileList) => {
  console.log('文件上传成功', response)
  ElMessage.success('文件上传成功')
}

// 上传失败回调
const handleUploadError = (err, file, fileList) => {
  console.error('文件上传失败', err)
  ElMessage.error('文件上传失败')
}

// 组件挂载时获取数据
onMounted(() => {
  fetchData()
})
</script>

<template>
  <div>
    <div class="search-container">
      <el-form :inline="true">
        <el-form-item label="商品名称">
          <el-input v-model="searchGoodName" placeholder="请输入商品名称" />
        </el-form-item>
        <el-form-item label="商品分类">
          <el-input v-model="searchGoodClass" placeholder="请输入商品分类" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleSearch">搜索</el-button>
          <el-button @click="handleReset">重置</el-button>
          
          <div style="display: inline-block; width: 20px;"></div>

          <el-upload
            class="upload-demo"
            :action="uploadUrl"
            :on-success="handleUploadSuccess"
            :on-error="handleUploadError"
            :headers="headers"
            accept=".csv"
            :show-file-list="false"
          >
            <el-button type="primary">批导</el-button>
          </el-upload>
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="id" label="ID" width="80" />
      <el-table-column prop="goodId" label="商品ID" width="120" />
      <el-table-column prop="goodName" label="商品名称" />
      <el-table-column label="商品主图">
        <template #default="scope">
          <img :src="scope.row.goodMainImg" alt="商品主图" style="width: 50px; height: 50px" />
        </template>
      </el-table-column>
      <el-table-column prop="shopName" label="店铺名称" />
      <el-table-column prop="goodClass" label="商品分类" />
      <el-table-column prop="discountPrice" label="折扣价" width="100" />
      <el-table-column prop="finaPrice" label="到手价" width="100" />
      <el-table-column prop="brand" label="品牌" />
      <el-table-column prop="couponDenomination" label="优惠券面额" width="120" />
      <el-table-column prop="couponStart" label="优惠券开始时间" width="180" />
      <el-table-column prop="couponEnd" label="优惠券结束时间" width="180" />
      <el-table-column prop="couponShortLink" label="优惠券短链接">
        <template #default="scope">
          <a :href="scope.row.couponShortLink" target="_blank">{{ scope.row.couponShortLink }}</a>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination
      :current-page="currentPage"
      :page-size="pageSize"
      :total="total"
      layout="prev, pager, next, jumper, sizes"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    />
  </div>
</template>

<style scoped lang="scss">
img {
  object-fit: cover;
}

a {
  color: #409eff;
  text-decoration: none;

  &:hover {
    text-decoration: underline;
  }
}

.search-container {
  margin-bottom: 20px;
}
</style>
